<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>睡眠列表</title>

    <link rel="stylesheet" th:href="@{/css/bootstrap.css}">
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.17.1/bootstrap-table.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.17.1/bootstrap-table.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.17.1/locale/bootstrap-table-zh-CN.min.js"></script>


</head>
<body class="container">
<br/>
<br/>
<!--导航栏-->
<div>
    <!--个人信息-->
    <div style="float:left; width: 20%">
        <form class="form-horizontal" action="/user/info" method="post">
            <!--id-->
            <input type="hidden" name="uid" th:value="${user.uid}"/>
            <input type="submit" value="个人信息" style="width: 100%" class="btn btn-info"/>
        </form>
    </div>

    <!--睡眠计划-->
    <div style="float:left; width: 20%">
        <form class="form-horizontal" action="/user/plan" method="post">
            <!--id-->
            <input type="hidden" name="uid" th:value="${user.uid}"/>
            <input type="submit" value="睡眠计划" style="width: 100%" class="btn btn-info"/>
        </form>
    </div>
    <!--睡眠记录-->
    <div style="float:left; width: 20%">
        <form class="form-horizontal" action="/sleep/list" method="post">
            <!--id-->
            <input type="hidden" name="uid" th:value="${user.uid}"/>
            <input type="submit" value="睡眠记录" style="width: 100%; background-color: red" class="btn btn-info"/>
        </form>
    </div>
    <!--论坛-->
    <div style="float:left; width: 20%">
        <form class="form-horizontal" action="/comment/list" method="post">
            <!--id-->
            <input type="hidden" name="uid" th:value="${user.uid}"/>
            <input type="submit" value="论坛" style="width: 100%" class="btn btn-info"/>
        </form>
    </div>
    <!--登录的用户信息-->
    <div style="float:right; width: 20%">
        <input type="hidden" id="uid" th:value="${user.uid}">
        <h3 th:text="'欢迎您:'+${user.nickname}"/>
    </div>
</div>
<br/>
<br/><br/>
<!--模糊查询表单-->
<div class="form-inline">
    <br/>
    <!--睡眠编号-->
<!--    <input type="hidden" id="uid" th:value="${user.uid}"/>-->

    <!--睡眠类型-->
    <div class="form-group">
        <label for="sType" class="control-label">睡眠类型</label>
        <select name="sType" id="sType" style="width: 300px" class="form-control">
            <option th:value="null" th:text="选择睡眠类型"/>
            <option th:value="1" th:text="晚上睡觉"/>
            <option th:value="2" th:text="午觉"/>
        </select>
    </div>
    <div class="form-group">
        <input type="button" id="select" value="查询" class="btn btn-info"/>
        <input type="button" id="reset" value="重置" class="btn btn-info"/>
        <input type="button" id="toAdd" value="添加" class="btn btn-info"/>
<!--        <a href="/sleep/toAdd" th:href="@{/sleep/toAdd}" class="btn btn-info">添加</a>-->
    </div>
</div>
<!--模糊查询 + 睡眠记录按钮 + 添加按钮 的 js-->
<script>
    $(function () {
        $("#select, #sleepList").click(function () {
            let sType = $("#sType").val();
            let uid = $("#uid").val();
            $.post("/sleep/list-data",
                {
                    uid: uid,
                    sType: sType
                },
                function (data) {
                    console.log(uid)
                    data = eval("(" + data + ")");
                    $("#sleep-table").bootstrapTable('load', data);
                }
            );
        });
        // 重置按钮
        $("#reset").click(function () {
            $("#username").val("");
            $("#sType").val("null");
            $("#tel").val("");
        });

        $("#toAdd").click(function (){
            let uid = $("#uid").val();
            $(location).attr('href', '/sleep/toAdd/' + uid);
        });
    });
</script>

<br/>
<!--表格内容-->
<div>
    <script src="../../layer/layer.js"></script>
    <!--bootstrapTable表头-->
    <div class="width:80%">
        <table id="sleep-table" class="table table-striped table-bordered"></table>
    </div>
</div>
<!--bootstrapTable内容js-->
<script>
    $(function () {
        function addUpdateOperateBtn(value, row, index) {
            return [
                '<button id="update" type="button" class="btn btn-default">修改</button>'
            ].join('');
        }


        window.updateEvents = {
            //修改按钮的绑定事件
            'click #update': function (e, value, row, index) {
                let sid = row.sid
                $(location).attr('href', '/sleep/toUpdate/' + sid);

            }
        };

        function addDeleteOperateBtn(value, row, index) {
            return [
                '<button id="delete" type="button" class="btn btn-default">删除</button>'
            ].join('');
        }


        window.deleteEvents = {
            //删除按钮的绑定事件
            'click #delete': function (e, value, row, index) {
                let sid = row.sid;
                layer.confirm("确认要删除吗，删除后不能恢复", {title: "确认删除"}, function (index) {
                    layer.close(index);
                    let windowId = layer.load();
                    $.get("/sleep/delete-data", {sid: sid}, function (data) {
                        layer.close(windowId);
                        data = eval("(" + data + ")");
                        layer.msg("<em style='color:red'>" + data.result + "</em>", {icon: 6});
                        $("#sleep-table").bootstrapTable('refresh', "/sleep/list-data");
                    });
                });
            }
        };

        $("#sleep-table").bootstrapTable({
            url: "/sleep/list-data",//数据地址
            striped: true,//是否显示行的间隔
            pageNumber: 1,//初始化加载第几页
            pagination: true,//是否分页
            sidePagination: 'server',
            pageSize: 5,
            pageList: [5, 10, 20],
            showRefresh: true,
            queryParams: function (params) {
                let uid = $("#uid").val();
                let temp = {
                    uid: uid,
                    offset: params.offset,
                    limit: params.limit,
                    pageSize: params.pageSize
                };
                return temp;
            },
            columns: [
                {
                    title: "睡眠编号",
                    field: "sid",
                    sortable: true
                },
                {
                    title: "睡眠时间",
                    field: "sTime",
                    sortable: false
                },
                {
                    title: "睡眠周期",
                    field: "sCycle",
                    sortable: false
                },
                {
                    title: "睡眠类型",
                    field: "sTypeName",
                    sortable: false
                },
                {
                    title: "睡眠日期",
                    field: "sDate",
                    sortable: false
                },
                {
                    title: '修改',
                    field: 'update',
                    events: updateEvents,//给按钮注册事件
                    formatter: addUpdateOperateBtn//表格中增加按钮

                },
                {
                    title: '删除',
                    field: 'delete',
                    events: deleteEvents,//给按钮注册事件
                    formatter: addDeleteOperateBtn//表格中增加按钮
                }
            ]
        });
    });
</script>
</body>
</html>